import React from 'react'
import {inject, observer} from 'mobx-react';
import {toJS} from 'mobx';
import {Tools,Flex,WhiteSpace,Icon} from 'weaver-mobile';
import {Route, withRouter } from 'react-router-dom';
const getLabel = Tools.getLabel;


@withRouter
@observer
class FnaFlex extends React.Component {
    constructor(props){
        super(props);
    }

    // static defaultProps = {
    //     prefixCls:"fnaMobile-home"
    // }

    componentDidMount() {

    }
    componentWillReceiveProps(nextProps){

    }

    render() {
        const {flexList,className} = this.props;
        const {plateFnList} = toJS(flexList);
//         const {} = plateFnList;

        return (
            <div className={'multi-col-layouts'}>
                <Flex className={`fna-flex-icon ${className}`}>
                    {plateFnList && plateFnList.map( item => {
                        return (
                            <Flex.Item className={`fna-flex-icon-item`} key={item.key} style={JSON.parse(item.itemStyle)} onClick={()=>{}}>
                                <div className={`fna-flex-icon-item-icon`} style={JSON.parse(item.item_icon_style)}><Icon type={item.icon} /></div>
                                <div className={`fna-flex-icon-item-text`} style={JSON.parse(item.item_text_style)}>{item.title}</div>
                            </Flex.Item>
                        )
                    })}
                </Flex>
            </div>
        )
    }


}

export default FnaFlex;